<template>
  <!-- // 地图 -->
  <div class="homePageCards1">
    <div class="grollDiv" :class="{ 'isZkSelect': isZkSelect }">
      <img src="../../../../assets/img/ckDetail.png" alt="" @click="showXlt">
      <div class="flex flex-warp">
        <div style="display: flex;width: 100%;justify-content: space-between;color: #409eff;font-weight: bold;">
          <div class="dzTitle">变电站</div>
          <el-checkbox v-model="dzCheckAll" @change="stationChange">全选</el-checkbox>
        </div>
        <el-checkbox-group v-model="checkList" @change="handleCheckedDzChange">
          <el-checkbox v-for="item in resourceTypes" :label="item.value" :key="item.value">{{item.name}}</el-checkbox>
        </el-checkbox-group>
      </div>
      <div class="flex flex-warp">
        <div style="display: flex;width: 100%;justify-content: space-between;color: #409eff;font-weight: bold;">
          <div class="dzTitle">线路</div>
          <el-checkbox v-model="lineCheckAll" @change="lineChange">全选</el-checkbox>
        </div>
        <el-checkbox-group v-model="lineCheckList" @change="handleCheckedLineChange">
          <el-checkbox v-for="item in lineTypes" :label="item.value" :key="item.value">{{item.name}}</el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
    <div class="full-box" @click="fullscreen">
      <img src="../../../../assets/img/full.png" alt="" />
      <span>{{this.FullScreen?'返回':'全屏'}}</span>
    </div>
    <div v-show="showLR" class="legend_right">
      <div class="top">
        <span style="display: flex"><img src="../../../../assets/map/circle.jpg" height="18px" width="18px" alt="" />
          <div style="margin-left: 6px">变电站</div>
        </span>
        <span style="display: flex; align-items: center; margin-bottom: 4px">
          <div style="width: 26px; height: 6px; background: #000"></div>
          <div style="margin-left: 6px">线路</div>
        </span>
      </div>
      <div class="bottom_unit">
        <div>
          <span class="yanse" style="background: #0000ff"></span>
          <span>1000kV</span>
        </div>
        <div>
          <span class="yanse" style="background: #fa0000"></span>
          <span>500kV</span>
        </div>
      </div>
      <div class="bottom_unit">
        <div>
          <span class="yanse" style="background: #800080"></span>
          <span>220kV</span>
        </div>
        <div>
          <span class="yanse" style="background: #f04141"></span>
          <span>110kV</span>
        </div>
      </div>
      <div class="bottom_unit">
        <div>
          <span class="yanse" style="background: #ffff00"></span>
          <span>35kV</span>
        </div>
        <div>
          <span class="yanse" style="background: #e2ac06"></span>
          <span>20kV</span>
        </div>
      </div>
      <div class="bottom_unit">
        <div>
          <span class="yanse" style="background: #00d200"></span>
          <span>10kV</span>
        </div>
        <div>
          <span class="yanse" style="background: #00008b"></span>
          <span>6kV</span>
        </div>
      </div>
      <div class="bottom_unit">
        <div>
          <span class="yanse" style="background: #d2b48c"></span>
          <span>0.4kV</span>
        </div>
        <div>
          <span class="yanse" style="background: #aaaaaa"></span>
          <span>设备失电</span>
        </div>
      </div>
    </div>
    <div id="warrmap" style="width: 100%; height: 100%"></div>
    <div id='layercards'></div>
    <LsdDialog :dialogConfig="video_dialog" @close="closeDialog">
      <div slot="dialog">
        <img width="100%" src="../../../../assets/img/pd3.png" alt="" />
      </div>
    </LsdDialog>
  </div>
</template>
<script>
import sjccKey from "../../../../config/sjmapkey";
var msFlag = false;
// 思极地图加载完成标记
var sgMapFlag = false;
export default {
  name: "MapContent",
  components: {},
  props: {
    layerCard: {
      type: Boolean,
      default: true
    },
    mapCenter: {
      type: Array,
      default: () => [114.36730140947924, 30.574022147218216]
    },
    mapZoom: {
      type: Number,
      default: 8
    }
  },
  data: function () {
    return {
      lineCheckAll: true,
      isZkSelect: true,
      dzCheckAll: true,
      FullScreen: false,
      checkList: ["36,37,84,85,86", "35,83", "33,34", "32,30", "25,76", "22,24"],
      lineCheckList: ["36,37,84,85,86", "35,83", "33,34", "32,30", "25,76", "22,24"],
      dzdydjs: {
        "21": "交流6kV",
        "22": "交流10kV",
        "23": "交流15.75kV",
        "24": "交流20kV",
        "25": "交流35kV",
        "30": "交流66kV",
        "31": "交流72.5kV",
        "32": "交流110kV",
        "33": "交流220kV",
        "34": "交流330kV",
        "35": "交流500kV",
        "36": "交流750kV",
        "37": "交流1000kV",
        "76": "直流35kV",
        "77": "直流30kV",
        "78": "直流50kV",
        "80": "直流120kV",
        "81": "直流125kV",
        "82": "直流400kV",
        "83": "直流500kV",
        "84": "直流660kV",
        "85": "直流800kV",
        "86": "直流1000kV",
        "87": "直流200kV",
        "88": "直流320kV"
      },
      showLR: false,
      movePointMarker: null,
      map: null,
      gridLayer: null,
      geo: null,
      geocodingTask: null,
      video_dialog: {
        title: "现场照片",
        isShow: false
      },
      resourceTypes: [
        {
          name: "特高压",
          value: "36,37,84,85,86"
        },
        {
          name: "500KV",
          value: "35,83"
        },
        {
          name: "220/330KV",
          value: "33,34"
        },
        {
          name: "110/66KV",
          value: "32,30"
        },
        {
          name: "35KV",
          value: "25,76"
        },
        {
          name: "10/20KV",
          value: "22,24"
        }
      ],
      lineTypes: [
        {
          name: "特高压",
          value: "36,37,84,85,86"
        },
        {
          name: "500KV",
          value: "35,83"
        },
        {
          name: "220/330KV",
          value: "33,34"
        },
        {
          name: "110/66KV",
          value: "32,30"
        },
        {
          name: "35KV",
          value: "25,76"
        },
        {
          name: "10/20KV",
          value: "22,24"
        }
      ],
      popupInfoWindow: null,
      whereHouseList: [
        {
          id: "a1xx",
          longitude: 113.29483316315874,
          latitude: 31.87961581398725,
          name: "YJXD20210812随州3#装备仓库特岗巡护",
          type: "特岗巡护",
          dep: "设备部",
          user: "曹伟"
        },
        {
          id: "a2xx",
          longitude: 113.43975529120443,
          latitude: 31.991373255426004,
          name: "YJXD20210812随州3#装备仓库值守",
          type: "值守",
          dep: "安监部",
          user: "徐波"
        },
        {
          id: "a3xx",
          longitude: 113.13975529120443,
          latitude: 31.491373255426004,
          name: "YJXD20210812随州3#装备仓库应急供电",
          type: "应急供电",
          dep: "配电部",
          user: "曹伟"
        },
        {
          id: "a4xx",
          longitude: 113.11975529120443,
          latitude: 31.991373255426004,
          name: "YJXD20210812随州3#装备仓库值守",
          type: "值守",
          dep: "互联网部",
          user: "何鹏"
        },
        {
          id: "a5xx",
          longitude: 113.61975529120443,
          latitude: 32.2373255426004,
          name: "YJXD20210812随州3#装备仓库值守",
          type: "值守",
          dep: "调控中心",
          user: "童强"
        },
        {
          id: "a6xx",
          longitude: 113.69975529120443,
          latitude: 32.4273255426004,
          name: "YJXD20210812随州3#装备仓库值守",
          type: "值守",
          dep: "调控中心",
          user: "童强"
        }
      ],
      lineData: [
        {
          id: "a1xx",
          longitude: 113.29483316315874,
          latitude: 31.27961581398725,
          isStation: true,
          stationName: "变电站1"
        },
        {
          id: "a2xx",
          longitude: 113.43975529120443,
          latitude: 31.991373255426004,
          isStation: false
        },
        {
          id: "a3xx",
          longitude: 113.13975529120443,
          latitude: 31.491373255426004,
          isStation: false
        },
        {
          id: "a4xx",
          longitude: 113.11975529120443,
          latitude: 31.991373255426004,
          isStation: true,
          stationName: "变电站2"
        },
        {
          id: "a5xx",
          longitude: 113.61975529120443,
          latitude: 32.2373255426004,
          isStation: false
        },
        {
          id: "a6xx",
          longitude: 113.69975529120443,
          latitude: 32.4273255426004,
          isStation: true,
          stationName: "变电站3"
        }
      ],
      lineData1: [
        {
          id: "6xx",
          longitude: 113.19975529120443,
          latitude: 31.3273255426004,
          isStation: true,
          stationName: "变电站3"
        },
        {
          id: "2xx",
          longitude: 113.43975529120443,
          latitude: 31.991373255426004,
          isStation: false
        },

        {
          id: "3xx",
          longitude: 113.13975529120443,
          latitude: 31.491373255426004,
          isStation: false
        },
        {
          id: "4xx",
          longitude: 113.11975529120443,
          latitude: 31.991373255426004,
          isStation: true,
          stationName: "变电站2"
        },
        {
          id: "5xx",
          longitude: 113.61975529120443,
          latitude: 32.2373255426004,
          isStation: false
        },
        {
          id: "1xx",
          longitude: 113.19483316315874,
          latitude: 32.17961581398725,
          isStation: true,
          stationName: "变电站1"
        }
      ],
      mapData: [
        {
          id: "123",
          dangerName: "暴雨",
          effectRange: "III级",
          address: "随州市柳林镇",
          longitude: 113.61975529120443,
          latitude: 31.921373255426004
        },
        {
          id: "124",
          dangerName: "暴雨",
          effectRange: "III级",
          address: "随州市柳林镇",
          longitude: 113.21975529120443,
          latitude: 32.191373255426004
        }
      ],
      keyword: "随县",
      gisToken: "",
      lineStation: null
    };
  },
  beforeDestroy() {
    this.$eventBus.$off("createlayer");
  },
  mounted() {
    this.init();
    window.handleSee = this.handleSee;
    window.handleSeeVideo = this.handleSeeVideo;
    this.$eventBus.$on("createlayer", (name) => {
      this.initEGISMap(name);
    });
  },
  computed: {
    typeNames() {
      return this.resourceTypes.filter((i) => i.value === true);
    }
  },
  watch: {
    // 100000线路，300000电站
    checkList: {
      handler(val) {
        if (this.map) {
          const filterArr = val.join(",").split(",");
          this.map.setFilter("300000", ["in", "dydj", ...filterArr]);
          this.map.setFilter("131405", ["in", "dydj", ...filterArr]);
          //  this.resourceTypes.forEach(item => {
          //   if (val.includes(item.value)) {
          //      this.map.setLayoutProperty(item.value, "visibility", "visible");
          //    } else {
          //      this.map.setLayoutProperty(item.value, "visibility", "none");
          //    }
          //  });
        }
      },
      deep: true
    },
    lineCheckList: {
      handler(val) {
        if (this.map) {
          const filterArr = val.join(",").split(",");
          this.map.setFilter("100000", ["in", "dydj", ...filterArr]);
        }
      },
      deep: true
    }
  },
  methods: {
    showXlt() {
      this.isZkSelect = !this.isZkSelect;
    },
    stationChange(val) {
      this.checkList = val ? this.resourceTypes.map(i => i.value) : [];
    },
    handleCheckedDzChange(val) {
      this.dzCheckAll = this.resourceTypes.length === val.length;
    },
    lineChange(val) {
      this.lineCheckList = val ? this.lineTypes.map(i => i.value) : [];
    },
    handleCheckedLineChange(val) {
      this.lineCheckAll = this.lineTypes.length === val.length;
    },
    loginMs() {
      const params = { appkey: "254fdbcf36d049b98d45226f4cfbe373" };
      this.newPost("http://25.55.39.140:21100" + "/authorityservice/login/integrate", params).then((res) => {
        if (res.data.success) {
          // step-3:配置sdk对接微服务的参数
          // 设置微服务出图参数是否全报文加密(设置true和false都可以，默认是false)
          // egisV2.MicroService.serviceInfo.encMode = false
          // 这个是给sdk请求vecformat接口用的参数，vecformat为共享服务，现场无需使用全报文加密
          // 设置微服务的token
          /* global egisV2 */
          egisV2.MicroService.serviceInfo.token = res.data.resultValue.token;
          this.gisToken = res.data.resultValue.token;
          // 设置微服务的secretKey
          egisV2.MicroService.serviceInfo.secretKey = "e25b50f1-417c-4dc3-986b-827dd71ec4cd";
          msFlag = true;
          this.initEGISMap();
        } else {
          alert(res.data.message);
        }
      },
      (err) => {
        console.log(err);
        alert("微服务认证失败");
      }).catch((e) => {
        console.log(e, 1);
      });
    },
    newPost(url, param = {}) {
      const service = this.$http.create({});
      const uid = this.getUUID();
      const accessToken = this.gisToken || "";
      const timestamp = new Date().getTime();
      let signInfo = "timestamp=" + timestamp + "&random=" + uid + "&secretkey=" + "e25b50f1-417c-4dc3-986b-827dd71ec4cd";
      if (accessToken) {
        signInfo = "token=" + accessToken + "&" + signInfo;
      }
      service.defaults.headers.post["token"] = accessToken;
      service.defaults.headers.post["random"] = uid;
      service.defaults.headers.post["timestamp"] = timestamp;
      service.defaults.headers.post["sign"] = egisV2.util.EncryptUtil.sm3(signInfo).toUpperCase();
      service.defaults.headers.post["Content-Type"] = "application/json";
      service.defaults.headers.post["X-Requested-With"] = "XMLHttpRequest";
      return new Promise((resolve, reject) => {
        service({
          method: "post",
          url,
          data: param
        }).then((res) => {
          if (res.data.success && res.data.resultValue) {
            resolve(res);
          } else {
            console.log("something error");
            console.error(res.data.message);
          }
        }).catch((err) => {
          console.log(err, 2);
          reject(err);
        });
      });
    },
    /* global LayerCards */
    initLayerCard() {
      window.l = new LayerCards({
        map: this.map,
        container: "layercards"
      });
      this.map.on("styledata", () => {
        this.resourceTypes.forEach(item => {
          if (this.checkList.includes(item.value)) {
            if (this.map.getLayer(item.value)) {
              this.map.setLayoutProperty(item.value, "visibility", "visible");
            }
          } else {
            if (this.map.getLayer(item.value)) {
              this.map.setLayoutProperty(item.value, "visibility", "none");
            }
          }
        });
      });
    },
    search(name) {
      const districtTask = new SGMap.DistrictTask();
      districtTask
        .searchDistrict({
          keyword: name,
          extension: true,
          subdistrict: "1"
        })
        .then((result) => {
          if (!result.data) return;
          result = result.data;
          if (!result.districts) {
            return;
          }
          // var features = [];

          var provinceFeatures = [];

          for (var i = 0; i < result.districts.length; i++) {
            provinceFeatures.push({
              type: "Feature",
              geometry: result.districts[i].shape
            });
          }
          console.log("name", provinceFeatures);
          // 更新图层数据
          this.map.getSource("province-polygon").setData({
            type: "FeatureCollection",
            features: provinceFeatures
          });
          this.map.getSource("province-line").setData({
            type: "FeatureCollection",
            features: provinceFeatures
          });
          this.map.flyTo({
            center: result.districts[0].center.split(",")
          });
          // 几何求交
          this.newPost("http://25.55.39.140:21100" + "/queryservice/psrquery/queryequipfeatures", {
            "geometries": [result.districts[0].shape],
            "geometry": [window.map.getStyle().sources["300000"]]
          }).then(res => {
            console.log(res);
          });

        });
    },
    initLayer() {
      this.map.addLayer({
        id: "province-polygon",
        type: "fill",
        source: {
          type: "geojson",
          data: {
            type: "FeatureCollection",
            features: []
          }
        },
        paint: {
          "fill-color": "#206bf5",
          "fill-opacity": 0.3
        }
      });
      this.map.addLayer({
        id: "province-line",
        type: "line",
        source: {
          type: "geojson",
          data: {
            type: "FeatureCollection",
            features: []
          }
        },
        layout: {
          "line-cap": "round",
          "line-join": "round"
        },
        paint: {
          "line-color": "#3995ea",
          "line-width": 2
        }
      });
    },
    initEGISMap(cityName) {
      if (!msFlag || !sgMapFlag) {
        return;
      }
      this.map = egisV2.createMap({
        container: "warrmap",
        style: "aegis://styles/aegis/Streets",
        doubleClickZoom: true,
        zoom: this.mapZoom,
        preserveDrawingBuffer: true,
        maxZoom: 23.5,
        center: this.mapCenter,
        localIdeographFontFamily: "Microsoft YoHei"
      });
      window.map = this.map;
      // map.scrollZoom.setWheelZoomRate(1)
      this.map.egis.selectionSet.setSpeed(5);
      this.map.on("load", (e) => {
        this.initLayer();
        // this.search("荆门市");
        // this.$eventBus.$on("createlayer", this.search);
        if (cityName) {
          this.search(cityName);
        }
        if (this.layerCard) {
          this.initLayerCard();
        }
        if (!this.map.style.stylesheet.glyphs) {
          this.map.style.stylesheet.glyphs = "aegis://fonts/aegis/{fontstack}/{range}.pbf";
          this.map.style.glyphManager.setURL(
            "aegis://fonts/aegis/{fontstack}/{range}.pbf"
          );
        }
        new SGMap.EleSymbolLayer({ mobile: true, type: "all" }); // 加载电网图数据
        this.map.addControl(
          new SGMap.ScaleControl({
            maxWidth: 80,
            unit: "metric"
          }),
          "bottom-left"
        );
        this.initGridLayer();
      });
      // 这里是地图点击的测试代码
      const that = this;
      this.map.on("click", function (e) {
        if (that.movePointMarker) {
          that.movePointMarker.remove();
          that.movePointMarker = null;
        }
        const features = that.map.queryRenderedFeatures(e.point);
        console.log(e.lngLat);
        console.log(features);
        const paramsArr = [];
        features.forEach(item => {
          if (item.properties.layerid && item.properties.oid) {
            paramsArr.push({
              id: item.properties.layerid,
              featureList: [
                {
                  layerDefs: `oid=${item.properties.oid}`
                }
              ]
            });
          }
        });
        if (paramsArr.length === 0) return;
        that.newPost("http://25.55.39.140:21100" + "/queryservice/psrquery/queryequipfeatures", paramsArr).then(res => {
          if (res.status === 200 && res.data && res.data.resultValue && res.data.resultValue.map) {
            const map = res.data.resultValue.map;
            let str = "";
            if (map["300000"]) {
              // const tsfParams = { typeid: '300000', psrid: map["300000"][0].feature[0].oid, attributes: { yxdw: map["300000"][0].feature[0].yxdw } }
              // that.newPost("http://25.55.39.140:21100" + "/metadataservice/codetsf/tsf", tsfParams).then(res => {
              // })
              map["300000"].forEach(el => {
                str += `<div style="padding: 3px;font-size: 16px;">变电站:${el.feature[0].sbmc}</div><div style="padding: 3px;font-size: 16px;">电压等级:${that.dzdydjs[el.feature[0].dydj]}</div>`;
              });
            } else {
              if (map["100000"]) {
                map["100000"].forEach(el => {
                  str += `<div style="padding: 3px;font-size: 16px;">线路名称:${el.feature[0].sbmc}</div><div style="padding: 3px;font-size: 16px;">电压等级:${that.dzdydjs[el.feature[0].dydj]}</div>`;
                });
              }
            }
            str = '<div style="padding: 15px 6px;background: #fff;color: #333;position: relative;"><div style="padding: 3px;font-size: 18px;font-weight: 600;">台账信息:</div>' + str + "</div>";
            const movePointDOM = document.createElement("div");
            movePointDOM.innerHTML = str;
            movePointDOM.className = "marker";
            that.movePointMarker = new SGMap.Marker(movePointDOM);
            that.movePointMarker.setLngLat([e.lngLat.lng, e.lngLat.lat]).addTo(that.map);
            movePointDOM.onclick = (e) => {
              e.stopPropagation();
              that.movePointMarker.remove();
            };
          }
        });
      });
    },
    getUUID() {
      var s = [];
      var hexDigits = "0123456789abcdef";
      for (var i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
      }
      s[14] = "4";
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
      s[8] = s[13] = s[18] = s[23] = "-";
      var uuid = s.join("");
      return uuid;
    },
    fullscreen() {
      // 进入全屏
      var docElm = document.querySelector(".homePageCards1"); // 指定容器id
      if (!this.FullScreen) {
        // 兼容W3C
        if (docElm.requestFullscreen) {
          docElm.requestFullscreen();
        } else if (docElm.mozRequestFullScreen) {
          // 兼容FireFox
          docElm.mozRequestFullScreen();
        } else if (docElm.webkitRequestFullScreen) {
          // 兼容Chrome等
          docElm.webkitRequestFullScreen();
        } else if (docElm.msRequestFullscreen) {
          docElm.msRequestFullscreen();
        }
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      }
      this.FullScreen = !this.FullScreen;
    },
    check(val) {
      this.resourceTypes.forEach((element) => {
        if (element.name !== val.name) {
          element.value = false;
        }
      });
      const param = this.typeNames;
      this.drawMap(param);
      this.$emit("typeNames", param);
    },
    init() {
      const self = this;
      if (process.env.NODE_ENV === "production") {
        egisV2.MicroService.active = true;
        SGMap.tokenTask.login(sjccKey.appkey, sjccKey.appsecret).then((res) => {
          SGMap.plugin(["SGMap.EleSymbolLayer", "SGMap.RoadNetLayer", "SGMap.DistrictTask"]).then(function (res) {
            sgMapFlag = true;
            self.initEGISMap();
          });
        });
        self.loginMs();
      } else {
        epgis.tokenTask.login(sjccKey.appkey, sjccKey.appsecret).then((res) => {
          this.initMap();
        });
      }
    },
    // 申请的key和sn
    initMap() {
      var self = this;
      this.map = new epgis.Map({
        // 地图绑定的DOM元素ID
        container: "warrmap",
        // 地图样式
        style: "aegis://styles/aegis/Streets",
        // 默认缩放层级
        zoom: this.mapZoom,
        // 地图中心点
        center: this.mapCenter,
        // 随县
        // center: [113.29483316315878, 31.87961581398723],
        // center: [110.73032848411, 32.037326322317],
        // 随州
        // center: [113.37377, 31.717497],
        // 地图默认字体
        localIdeographFontFamily: "Microsoft YoHei"
        // renderWorldCopies: false
      });
      this.map.on("load", (e) => {
        // window.top.postMessage("map_load_success", "*");
        var districtTask = new epgis.DistrictTask();
        let features = [];
        let featuresPolygon = [];
        // 行政区划名称查询行政区划;
        districtTask.searchDistrict({
          keyword: self.keyword,
          // 建议直辖市取2，其他省份取1，提升请求速度
          subdistrict: 2,
          extension: true,
          isEncode: false
        }).then((result) => {
          console.log("result", result.districts[0].center);
          // 偏移到对应位置
          this.map.flyTo({
            center: result.districts[0].center
          });
          // 主要区分直辖市和其他省份;
          const district =
            result.districts[0].sub_districts.length == 1
              ? result.districts[0].sub_districts[0]
              : result.districts[0];
          const shape = district.shape;
          if (shape.type == "MultiPolygon") {
            // eslint-disable-next-line no-redeclare
            for (const o in shape.coordinates) {
              features = features.concat(shape.coordinates[o]);
              featuresPolygon = featuresPolygon.concat(shape.coordinates[o]);
            }
          } else {
            features.push(shape.coordinates[0]);
            featuresPolygon = featuresPolygon.concat(shape.coordinates);
          }
          self.map.addLayer({
            id: "power-polygon",
            type: "fill",
            source: {
              type: "geojson",
              data: {
                type: "FeatureCollection",
                features: [
                  {
                    type: "Feature",
                    geometry: {
                      type: "Polygon",
                      coordinates: featuresPolygon
                    }
                  }
                ]
              }
            },
            paint: {
              "fill-color": "#dae4fa",
              "fill-opacity": 0.6
            }
          });
          // 行政区划边界线
          self.map.addLayer({
            id: "power-line",
            type: "line",
            source: {
              type: "geojson",
              data: {
                type: "FeatureCollection",
                features: [
                  {
                    type: "Feature",
                    geometry: {
                      type: "MultiLineString",
                      coordinates: features
                    }
                  }
                ]
              }
            },
            paint: {
              "line-color": "#3561fd",
              "line-width": 2,
              "line-dasharray": [0.5, 0.5]
            }
          });
          // 监听鼠标移出事件
          self.map.on("click", "1111", function (e) {
            self.popupInfoWindow.remove();
          });
          self.drawMap([{ name: "仓库", value: true }]);
        });
      });
      self.map.on("click", function (e) {
        self.popupInfoWindow.remove();
      });
    },
    removeAll() {
      if (this.gridLayer) {
        this.gridLayer.setVisible(false);
      }
      this.popupInfoWindow && this.popupInfoWindow.remove();
      if (this.map.getLayer("line-staton")) {
        this.map.removeLayer("line-staton");
        this.map.removeSource("line-staton");
      }
      if (this.lineStation) {
        this.lineStation.remove();
        this.lineStation = null;
      }
      this.whereHouseList.forEach((item) => {
        if (this.map.getLayer("houseLayer" + item.id)) {
          this.map.removeLayer("houseLayer" + item.id);
        }
        if (this.map.getLayer("houseImg" + item.id)) {
          this.map.removeLayer("houseImg" + item.id);
          this.map.removeImage("houseImg" + item.id);
        }
        if (this.map.getSource("houseImg" + item.id)) {
          this.map.removeSource("houseImg" + item.id);
          this.map.removeImage("houseImg" + item.id);
        }
        if (this.map.getSource("houseLayer" + item.id)) {
          this.map.removeSource("houseLayer" + item.id);
        }
      });
      this.lineData.forEach((item) => {
        if (this.map.getLayer("station" + item.id)) {
          this.map.removeLayer("station" + item.id);
        }
        if (this.map.getLayer("stationImg" + item.id)) {
          this.map.removeLayer("stationImg" + item.id);
          this.map.removeImage("stationImg" + item.id);
        }
        if (this.map.getSource("stationImg" + item.id)) {
          this.map.removeSource("stationImg" + item.id);
          this.map.removeImage("stationImg" + item.id);
        }
        if (this.map.getSource("station" + item.id)) {
          this.map.removeSource("station" + item.id);
        }
      });
      this.mapData.forEach((item) => {
        if (this.map.getLayer("map" + item.id)) {
          this.map.removeLayer("map" + item.id);
        }
        if (this.map.getLayer("mapImg" + item.id)) {
          this.map.removeLayer("mapImg" + item.id);
          this.map.removeImage("mapImg" + item.id);
        }
        if (this.map.getSource("mapImg" + item.id)) {
          this.map.removeSource("mapImg" + item.id);
          this.map.removeImage("mapImg" + item.id);
        }
        if (this.map.getSource("map" + item.id)) {
          this.map.removeSource("map" + item.id);
        }
      });
    },
    drawMap(param) {
      if (!param) {
        return false;
      }
      this.removeAll();
      var self = this;
      if (param[0].name == "仓库") {
        this.showLR = false;
        this.whereHouseList.forEach((item) => {
          this.popupInfoWindow = new epgis.Popup({
            closeButton: false,
            closeOnClick: false,
            anchor: "top-left",
            offset: [10, 10]
          });

          var url = require("../../../../assets/img/fangzi.png");
          this.map.loadImage(url, (error, image) => {
            this.map.addImage("houseImg" + item.id, image);
            this.map.addLayer({
              id: "houseLayer" + item.id,
              type: "symbol",
              source: {
                type: "geojson",
                data: {
                  type: "FeatureCollection",
                  features: [
                    {
                      type: "Feature",
                      geometry: {
                        type: "Point",
                        coordinates: [item.longitude, item.latitude]
                      },
                      properties: {
                        name: ""
                      }
                    }
                  ]
                }
              },
              layout: {
                "icon-image": "houseImg" + item.id,
                "icon-size": 0.15,
                "icon-ignore-placement": true,
                "text-ignore-placement": false,
                "text-size": 12,
                "text-anchor": "top",
                "text-allow-overlap": false,
                "icon-anchor": "center",
                "text-offset": [0, 0],
                "text-max-width": 8,
                "text-font": ["Microsoft YaHei Regular"]
              },
              paint: {
                "text-color": "#555252",
                "text-halo-color": "#FFFFFF",
                "text-halo-width": 1.33333
              }
            });
          });
          this.map.on("mouseenter", "houseLayer" + item.id, (e) => {
            this.popupInfoWindow
              .setLngLat(e.features[0].geometry.coordinates)
              .setHTML(
                `<div style="width:274px;height:207px;display:flex;flex-direction:column;padding:5px">
                    <div style="width:100%;height:25px;display:flex;align-items:center;justify-content:space-between">
                      <div style="flex:1;display:flex;align-items:center;">
                        <div class="popupBg"></div>
                        <p style="font-size:15px;color:#333333;font-weight:700">预警任务详情</p>
                      </div>
                      <div style="width:56px;color:#3561fd;text-decoration:underline;cursor: pointer;" onclick="handleSee('${item.id}')">查看详情</div>
                    </div>
                    <div style="width:100%;display:flex;flex-direction:column;margin-top:20px">
                      <div style="width:100%;margin-bottom:5px;font-size:15px;color:#666666;display:flex"><p style="width:110px;text-align:right">任务名称：</p><p style="flex:1">${item.name}</p></div>
                      <div style="width:100%;margin-bottom:5px;font-size:15px;color:#666666;display:flex"><p style="width:110px;text-align:right">任务类型：</p><p style="flex:1">${item.type}</p></div>
                      <div style="width:100%;margin-bottom:5px;font-size:15px;color:#666666;display:flex"><p style="width:110px;text-align:right">责任单位/部门：</p><p style="flex:1">${item.dep}</p></div>
                      <div style="width:100%;margin-bottom:5px;font-size:15px;color:#666666;display:flex"><p style="width:110px;text-align:right">责任人：</p><p style="flex:1">${item.user}</p></div>
                    </div>
                    <div style="width:100%;height:50px;display:flex;av zslign-items:center;justify-content:space-between;border-top:1px solid #eee;padding-top:10px">
                      <div onclick="handleSeeVideo(2)" style="cursor: pointer;font-size:15px;font-weight:700;margin-left:20px;color:#3561fd;text-decoration:underline">现场照片</div>
                      <div style="width:1px;height:30px;background-color:#eee"></div>
                      <div onclick="handleSee(3)" style="cursor: pointer;font-size:15px;font-weight:700;margin-right:20px;color:#3561fd;text-decoration:underline">查看轨迹</div>
                    </div>
                  </div>`
              )
              .addTo(this.map);
          });
        });
      } else if (param[0].name == "输电线路") {
        this.initGridLayer();
      } else if (param[0].name == "配电线路") {
        // this.showLR = true;
        const lindata = [];
        this.lineData1.forEach((item) => {
          if (item.isStation) {
            var url = require("../../../../assets/map/circle.jpg");
            this.map.loadImage(url, (error, image) => {
              this.map.addImage("stationImg" + item.id, image);
              this.map.addLayer({
                id: "station" + item.id,
                type: "symbol",
                source: {
                  type: "geojson",
                  data: {
                    type: "FeatureCollection",
                    features: [
                      {
                        type: "Feature",
                        geometry: {
                          type: "Point",
                          coordinates: [item.longitude, item.latitude]
                        },
                        properties: {
                          name: item.stationName
                        }
                      }
                    ]
                  }
                },
                layout: {
                  "icon-image": "stationImg" + item.id,
                  "icon-size": 0.5,
                  "icon-ignore-placement": true,
                  "text-ignore-placement": false,
                  "text-size": 16,
                  "text-anchor": "top",
                  "text-allow-overlap": false,
                  "icon-anchor": "bottom",
                  "text-offset": [0, 0],
                  "text-field": item.stationName,
                  "text-max-width": 8,
                  "text-font": ["Microsoft YaHei Regular"]
                },
                paint: {
                  "text-color": "#555252",
                  "text-halo-color": "#FFFFFF",
                  "text-halo-width": 1.33333
                }
              });
            });
          }
          lindata.push([item.longitude, item.latitude]);
        });
        this.lineStation = new epgis.DrawPolylineHandler({
          map: this.map,
          enableEdit: true,
          featuresList: [
            {
              type: "Feature",
              geometry: {
                type: "LineString",
                coordinates: lindata
              },
              properties: {
                id: "line-staton"
              }
            }
          ]
        });
      } else {
        this.showLR = false;
        this.mapData.forEach((item) => {
          const url = require("../../../../assets/img/guangquan.png");
          this.map.loadImage(url, (error, image) => {
            this.map.addImage("mapImg" + item.id, image);
            this.map.addLayer({
              id: "map" + item.id,
              type: "symbol",
              source: {
                type: "geojson",
                data: {
                  type: "FeatureCollection",
                  features: [
                    {
                      type: "Feature",
                      geometry: {
                        type: "Point",
                        coordinates: [item.longitude, item.latitude]
                      },
                      properties: {
                        name: "111"
                      }
                    }
                  ]
                }
              },
              layout: {
                "icon-image": "mapImg" + item.id,
                "icon-size": 0.25,
                "icon-ignore-placement": true,
                "text-ignore-placement": false,
                "text-size": 12,
                "text-anchor": "top",
                "text-allow-overlap": false,
                "icon-anchor": "center",
                "text-offset": [0, 0],
                "text-max-width": 8,
                "text-font": ["Microsoft YaHei Regular"]
              },
              paint: {
                "text-color": "#fff",
                "text-halo-color": "#555252",
                "text-halo-width": 3
              }
            });
          });
          // 监听鼠标进入事件
          this.map.on("mouseenter", "map" + item.id, function (e) {
            self.popupInfoWindow
              .setLngLat(e.features[0].geometry.coordinates)
              .setHTML(
                `<div style="width:350px;height:100px;display:flex;flex-direction:column;">
                    <div style="width:100%;height:25px;line-height:25px;text-align:center;">
                      <div style="font-size:16px;color:#333333;font-weight:700;">${item.dangerName}
                      </div>
                    </div>
                    <div style="width:100%;display:flex;flex-direction:column;margin-top:30px">
                      <div style="width:100%;margin-bottom:8px;font-size:15px;color:#333333;display:flex;justify-content:space-between;">
                        <div style="width:50%;">响应级别：${item.dangerName}</div>
                        <div style="width:50%;text-align:right">响应级别：${item.effectRange}</div>
                      </div>
                      <div style="width:100%;margin-bottom:8px;font-size:15px;color:#333333;display:flex"><p style="width:75px;">影响范围：</p><p style="flex:1">${item.address}</p></div>

                    </div>
                  </div>`
              )
              .addTo(self.map);
          });
        });
      }
    },
    initGridLayer() {
      if (this.gridLayer) {
        this.gridLayer.setVisible(true);
      }
      this.gridLayer = new egisV2.layer.GridVectorLayer({
        map: this.map, // 思极地图的map对象实例
        url: "http://25.55.39.140:21100/mapservice/mapexport/vecformat", // 栅格出图服务地址
        workerUrl: "",
        method: "POST", // 直连使用get请求，微服务使用post请求
        data: {
          // layers: "300000,301000,100000,103000", // 要显示的图层
          layers: "300000,100000",
          displayfilter: [], // 这个参数可以使用数组格式，如[{'300000':'dydj = 25'}],也可以将数组格式的数据通过JSON.stringify转成字符串，sdk这里有做兼容处理。
          mapid: 110,
          maptype: 1001
          // FILTERFLYLINE: 1,//是否过滤飞线
          // FLYLINELENGTH: 2500 * 10,//判定为飞线的最小距离
          // disschema: 1,
        }
      });
      this.gridLayer.render();
    },
    handleSee(val) {
      this.$router.push({
        name: "NoticeDetail",
        query: { id: val }
      });
    },
    handleSeeVideo(val) {
      this.video_dialog.isShow = true;
    },
    closeDialog() {
      this.video_dialog.isShow = false;
    }
  }
};
</script>

<style scoped lang="less">
:deep(.popupBg) {
  width: 30px;
  height: 30px;
  margin-right: 10px;
  background-image: url("../../../../assets/img/ckDetail.png");
  background-repeat: no-repeat;
}
.homePageCards1 {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 6px;
  border-radius: 5px;
  #map {
    border-radius: 5px;
  }
}
.grollDiv {
  width: 52%;
  //height: 15%;
  position: absolute;
  padding: 6px;
  overflow: hidden;
  transition: all 0.5s;
  height: 226px;
  background-color: rgba(255, 255, 255, 0.8);
  top: 10px;
  left: 10px;
  z-index: 9;
  color: #fff;
  font-size: 12px;
  line-height: 25px;
  .dzTitle {
    font-size: 16px !important;
  }
  .flex-warp {
    flex-wrap: wrap;
  }
  .checklist {
    width: 50%;
    margin-top: 8px;
    box-sizing: border-box;
    // text-align: center;
    input {
      width: 40%;
      height: 70%;
    }
    span {
      color: #000;
    }
  }
}
.isZkSelect {
  height: 30px;
}
.full-box {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 700;
  z-index: 9;
  background-color: #fff;
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 5px;

  img {
    width: 15px;
    height: 15px;
    margin-right: 5px;
  }
}
.legend_right {
  width: 200px;
  height: 196px;
  background: #fff;
  position: absolute;
  bottom: 15px;
  left: 15px;
  // display: flex;
  // align-items: center;
  font-size: 18px;
  font-weight: 700;
  z-index: 9;
  border-radius: 5px;
  .top {
    height: 30px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    display: flex;
    justify-content: space-between;
    margin: 5px 10px;
    border-bottom: 1px solid #d7d7d7;
  }
  .bottom_unit {
    display: flex;
    // justify-content: space-between;
    margin: 8px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    div {
      flex: 1;
      display: flex;
      align-items: center;
      span {
        text-align: center;
      }
      .yanse {
        display: inline-block;
        width: 16px;
        height: 16px;
        line-height: 16px;
        text-align: center;
        border-radius: 4px;
        margin-right: 4px;
      }
    }
  }
}
:deep(.epgis-popup) {
  max-width: 600px !important;
}
</style>
